<template>
  <div class="wholesale-list">
    <section class="el-container container-box is-vertical">
      <header class="el-header" style="height: auto;" />
      <p class="title">订单管理</p>
      <el-form ref="queryForm" :inline="true" label-position="right" :model="tableQuery">
        <el-row :gutter="40">
          <el-col :span="11" style="margin-left:30px">
            <el-form-item label="订单编号:" prop="orderCode">
              <el-input v-model="tableQuery.orderCode" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单状态:" prop="orderStatus" style="margin-left:-46px">
              <el-select v-model="tableQuery.orderStatus" placeholder="请选择">
                <el-option label="待提交" value="1" />
                <el-option label="待平台审核" value="2" />
                <el-option label="待支付" value="3" />
                <el-option label="待发货" value="6" />
                <el-option label="待收货" value="7" />
                <el-option label="部分收货" value="8" />
                <el-option label="已完成" value="9" />
                <el-option label="已取消" value="10" />
                <el-option label="校验失败" value="11" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="19">
            <div />
          </el-col>
          <el-col :span="11">
            <el-form-item label="订单提交日期:">
              <el-date-picker
                v-model="tableQuery.commitDateStart"
                type="date"
                placeholder="开始日期"
                style="width:180px"
              ></el-date-picker>
              <el-date-picker
                v-model="tableQuery.commitDateEnd"
                type="date"
                placeholder="结束日期"
                :picker-options="pickerOptions1"
                style="width:180px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="产品线:" prop="pruductLineName">
              <el-select v-model="tableQuery.productLineCode" placeholder="请选择">
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="queryFormReset">重置</el-button>
              <el-button type="primary" @click="queryFormQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="payload"
        height="auto"
        :row-class-name="heightLight"
        :border="true"
        style="margin-top:0"
      >
        <el-table-column property="orderCode" label="订单号" min-width="200"></el-table-column>
        <el-table-column property="supplierName" label="供应商" min-width="150"></el-table-column>
        <el-table-column property="productLineCode" label="产品线" width="100"></el-table-column>
        <el-table-column property="originalFactoryName" label="生产厂家" min-width="100"></el-table-column>
        <el-table-column property="orderAmount" label="总金额" width="100"></el-table-column>
        <el-table-column label="订单状态" width="100">
          <template slot-scope="scope">
            <span
              v-if="scope.row.orderStatus === 11"
              class="failColor"
              @click="showDialog(scope.row)"
            >{{ scope.row.statusName }}</span>
            <span v-if="scope.row.orderStatus !== 11">
              {{
              scope.row.statusName
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column property="commitDate" label="提交时间" min-width="200"></el-table-column>
        <el-table-column property="relevanceOrderId" label="关联单号" min-width="200"></el-table-column>
        <el-table-column property="commitUser" label="下单人" width="100"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.orderStatus === 1" type="text" @click="editGo(scope.row)">编辑</el-button>
            <el-button type="text" @click="checkDetail(scope.row)">查看</el-button>
            <el-button
              v-if="
                scope.row.orderStatus === 8"
              type="text"
              @click="takeDialog(scope.row)"
            >收货</el-button>
            <el-button
              v-if="
              scope.row.orderStatus === 3 ||
                scope.row.orderStatus === 7 ||
                scope.row.orderStatus === 6
            "
              type="text"
            >取消</el-button>
            <el-button
              v-if="scope.row.orderStatus === 11"
              type="text"
              @click="resubmit(scope.row)"
            >再次提交</el-button>
            <el-button
              v-if="scope.row.orderStatus === 11 || scope.row.orderStatus === 1||scope.row.orderStatus === 0"
              type="text"
              @click="delDialog(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 校验失败错误提醒 -->
      <el-dialog
        title="错误提醒"
        :modal="true"
        :fullscreen="fullscreen"
        custom-class="dialog-custom"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-editable :data="errorMsg" :columns="columns" />
      </el-dialog>
      <!-- 删除 -->
      <el-dialog
        title="删除"
        :modal="true"
        :fullscreen="fullscreen"
        custom-class="dialog-custom"
        :visible.sync="delDialogVisible"
        width="50%"
      >
        <h2>是否要删除此订单?</h2>
        <div class="delBtn" @click="concelDel">
          <el-button>取消</el-button>
          <el-button type="primary" @click="delSure">确认</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
